<template>

    <div class="org-member-container">

        <div class="member-panel">

            <div class="title">
                添加成员
                <div class="close-icon" @click="close">
                    <i class="iconfont icon-close"></i>
                </div>
            </div>

            <div class="form-container">
                <div class="sub-title">添加组织内成员到群组</div>
                <div class="member-options">

                    <g-scrollbar class="member-vertical-scroll">
                        <div class="members">
                            <ul>
                                <li v-for="member in otherMembers" :key="member.uid">
                                    <div class="select">
                                        <g-checkbox :key="member.uid" :model="selectMembers" v-on:change="chooseMember" :value="member.uid">
                                            {{member.alias ? `${member.email} (${member.alias})` : `${member.email}`}}
                                        </g-checkbox>
                                    </div>
                                    
                                </li>
                            </ul>
                        </div>
                    </g-scrollbar>

                    <div v-if="waiting" class="waiting-panel">
                        <i class="iconfont icon-loading icon-spin"></i>
                    </div>

                </div>
            </div>

            <div class="button-container">
                <g-button @click="close" >取消</g-button>
                <g-button type="primary" @click="addGroupMember" :disabled="waiting" :loading="loading">{{loading ? '操作中...' : '确定'}}</g-button>
            </div>
        </div>

    </div>
</template>

<script>

    import Bus from '@/utils/event_bus'
    import GCheckbox from 'components/common/g-checkbox'
    import GRadio from 'components/common/g-radio'
    import GScrollbar from 'components/common/g-scrollbar'
    import GButton from 'components/common/g-button'
    import {organization as orgAPI, group as groupAPI, groupData as groupDataAPI} from '@/api'


    export default {

        data: function() {
            return {
                waiting: false,
                loading: false,
                orgMembers: [],
                selectMembers: []
            }
        },

        components:{
            GCheckbox,
            GRadio,
            GButton,
            GScrollbar
        },

        props:{
            groups: Array,
            groupName: String,
            orgUid: String,
            uid: String
        },
        computed: {
            otherMembers: function(){

                return this.orgMembers.filter((member) => {
                    return !this.groups.some((value) => {
                        return value.email === member.email;
                    });
                });
            },
        },
        async mounted () {
            this.waiting = true;
            let result = await orgAPI.memberList(this.orgUid, {limit: 100});
            this.waiting = false;
            if (!result || result.data.code != 0) {
                this.$message.error('获取用户列表失败');
                return;
            }
            this.orgMembers = result.data.data;

        },

        methods: {

            close() {
                this.$emit('close-org-member');
            },
            async addGroupMember (){
                this.loading = true;
                let result = await groupAPI.addMembers(this.uid,this.selectMembers);
                this.loading = false;

                if (!result || result.data.code != 0) {

                    this.$message.error('添加成员失败');
                    return;
                }

                this.$message.success('添加成员成功');
                this.$emit('close-org-member'); 
                
                let choosedMembers = this.orgMembers.filter((member) => {
                    return this.selectMembers.some((value) => {
                        return value === member.uid;
                    });
                });
                         
                this.$emit('update-group-members',choosedMembers,this.uid);  
            },
            chooseMember (val){
                
                this.selectMembers = val;
            }

        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" >

    @import "common";

    .org-member-container {

        // @include absolute (0px, 0px, 0px, 0px);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1002;
        background: rgba(0, 0, 0, .5);

        .member-panel{
            position: absolute;
            left: 20px;
            right: 20px;
            width: 424px;
            margin: 0 auto;
            top: 50%;
            transform: translateY(-50%);
            background: $bgWhite;
            z-index: 10;
            border-radius: $bdRadius;
            box-shadow:0 4px 10px 1px rgba(48,59,70,0.20);
            @include user-select(none);

            div{
                @include box-sizing(border-box);
            }

            >.title {

                overflow: hidden;
                width: 100%;
                height: 50px;
                line-height: 48px;
                font-size: $fontSizeBase;
                font-weight: 500;
                padding: 0 14px 0 24px;
                position: relative;
                background-color: $bgWhite;
                border-top-left-radius: $bdRadius;
                border-top-right-radius: $bdRadius;
                border-bottom: 1px solid $bdGray;

                .close-icon{
                    float: right;
                    cursor: pointer;

                    &:hover{
                        color: $primary;
                    }

                    >i {
                        font-size: 20px;
                    }
                }
            }

            >.form-container {
                padding: 40px 24px 18px;
                // background-color: $bgMessage;
                font-size: $fontSizeSmall;
                position: relative;

                .sub-title {
                    font-size: $fontSizeMini;
                    color: #545e65;
                    position: absolute;
                    top: 12px;
                    left: 24px;
                }

                .member-options {

                    height: 200px;
                    border: 1px solid $bdGray;
                    border-radius: $bdRadius;
                    background-color: #fff;
                    position: relative;

                    .members {
                        padding: 16px;
                        overflow: hidden;

                        >label {
                            display: block;
                            margin-bottom: 8px;
                        }
                        div{
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            line-height: 19px;
                            font-size: 12px;
                        }
                        .g-checkbox{
                            margin-right: 0px;
                        }
                    }

                    >.member-vertical-scroll {
                        width: 100%;
                        height: 100%;

                        .g-scrollbar-scrollbar-vertical{
                            width: 6px !important;
                            .scrollbar.g-scrollbar-transition {
                                width: 6px !important;
                                border-radius: 3px;
                            }
                        }

                        .scrollbar{
                            display: block !important;
                            width: 6px !important;
                            background-color: #9e9e9e;
                        }

                        
                    }

                    .waiting-panel {
                        @include absolute (0px, 0px, 0px, 0px);
                        background: rgba(255, 255, 255, .5);
                        line-height: 198px;
                        text-align: center;

                        >i {
                            color: $gray;
                        }
                    }
                }                
            }

            .button-container {
                padding: 0 24px 12px;
                text-align: right;
                height: 50px;
                
                .g-button{
                    margin-left: 10px;
                }
            }

        }

    }

</style>
